<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { Card, Row, Col, Spin, TreeSelect } from 'ant-design-vue'
import {
  FileOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  AuditOutlined,
  PieChartOutlined,
  TeamOutlined
} from '@ant-design/icons-vue'
import { getTeacherStatistics } from '@/api/modules/statistics'
import { teacherClassApi } from '@/api/modules/teacherClass'
import type { TeacherStatisticsVO } from '@/types/statistics'
import type { ClassTreeVO } from '@/types/organization'
import StatisticCard from './StatisticCard.vue'
import SubmitStatusChart from './SubmitStatusChart.vue'
import TrendChart from './TrendChart.vue'

const statistics = ref<TeacherStatisticsVO>()
const loading = ref(false)
const selectedClassId = ref<number>()
const treeData = ref<ClassTreeVO[]>([])

// 获取班级树
const fetchClassTree = async () => {
  try {
    const data = await teacherClassApi.getClassTree()
    treeData.value = data || []
  } catch (error) {
    console.error('获取班级树失败:', error)
  }
}

// 转换树形数据
const treeNodes = computed(() => {
  const convert = (items: ClassTreeVO[]): any[] => {
    if (!items?.length) return []
    return items.map(item => ({
      key: item.id,
      value: item.id,
      title: item.name,
      children: item.children ? convert(item.children) : undefined,
      selectable: item.type === 3 // 只有班级节点可选
    }))
  }
  return convert(treeData.value)
})

const fetchStatistics = async () => {
  loading.value = true
  try {
    statistics.value = await getTeacherStatistics(selectedClassId.value)
  } finally {
    loading.value = false
  }
}

// 处理班级选择变化
const handleClassChange = (value: number) => {
  selectedClassId.value = value
  fetchStatistics()
}

onMounted(() => {
  fetchClassTree()
  fetchStatistics()
})
</script>

<template>
  <div class="teacher-dashboard">
    <!-- 顶部操作栏 -->
    <div class="dashboard-header">
      <div class="header-title">
        <h2>教师工作台</h2>
      </div>
      <div class="header-actions">
        <span class="select-wrapper">
          <TeamOutlined class="select-icon" />
          <TreeSelect
            v-model:value="selectedClassId"
            style="width: 280px"
            :tree-data="treeNodes"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="选择班级查看统计"
            allow-clear
            tree-default-expand-all
            @change="handleClassChange"
            size="large"
          />
        </span>
      </div>
    </div>

    <Spin :spinning="loading">
      <!-- 总览卡片 -->
      <div class="statistics-cards">
        <Row :gutter="[16, 16]">
          <Col :span="4.8" :flex="1">
            <StatisticCard
              title="总任务数"
              :value="statistics?.overview.totalTasks || 0"
              :icon="FileOutlined"
            />
          </Col>
          <Col :span="4.8" :flex="1">
            <StatisticCard
              title="进行中任务"
              :value="statistics?.overview.ongoingTasks || 0"
              :icon="ClockCircleOutlined"
            />
          </Col>
          <Col :span="4.8" :flex="1">
            <StatisticCard
              title="总提交数"
              :value="statistics?.overview.totalSubmissions || 0"
              :icon="CheckCircleOutlined"
            />
          </Col>
          <Col :span="4.8" :flex="1">
            <StatisticCard
              title="待审核数"
              :value="statistics?.overview.pendingReviews || 0"
              :icon="AuditOutlined"
            />
          </Col>
          <Col :span="4.8" :flex="1">
            <StatisticCard
              title="平均提交率"
              :value="(statistics?.overview.averageSubmitRate || 0) * 100"
              suffix="%"
              :precision="2"
              :icon="PieChartOutlined"
            />
          </Col>
        </Row>
      </div>

      <!-- 图表 -->
      <Row :gutter="[16, 16]" class="charts-container">
        <Col :span="12">
          <Card title="班级提交情况">
            <SubmitStatusChart :data="statistics?.classSubmitStatus" />
          </Card>
        </Col>
        <Col :span="12">
          <Card title="近期提交趋势">
            <TrendChart :data="statistics?.submitTrend" />
          </Card>
        </Col>
      </Row>
    </Spin>
  </div>
</template>

<style lang="less" scoped>
.teacher-dashboard {
  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 0 8px;

    .header-title {
      h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
      }
    }

    .header-actions {
      .select-wrapper {
        position: relative;
        display: inline-block;

        .select-icon {
          position: absolute;
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1;
          color: #1890ff;
          font-size: 16px;
        }

        :deep(.ant-select) {
          .ant-select-selector {
            padding-left: 36px;
            border-radius: 6px;
            border: 1px solid #d9d9d9;
            transition: all 0.3s;
            
            &:hover {
              border-color: #40a9ff;
            }
          }

          &.ant-select-focused {
            .ant-select-selector {
              border-color: #40a9ff;
              box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            }
          }

          .ant-select-selection-placeholder {
            color: #bfbfbf;
          }
        }
      }
    }
  }

  :deep(.ant-card) {
    height: 100%;
  }

  :deep(.ant-row) {
    width: 100%;
  }

  .statistics-cards {
    margin-bottom: 24px;
    
    :deep(.ant-card) {
      background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
      
      .ant-card-body {
        color: white;
        
        .ant-statistic-title {
          color: rgba(255, 255, 255, 0.85);
        }
        
        .ant-statistic-content {
          color: white;
        }
      }
    }
  }

  .charts-container {
    margin: 0;
  }
}

.mt-4 {
  margin-top: 16px;
}
</style> 